<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-row class="el-row">
        <el-col :span="6">客户编号：{{ detail.potentialCustomerStoreId }}</el-col>
        <el-col :span="6">机构名称：{{ detail.storeName }}</el-col>
        <el-col :span="6">意向状态：{{ detail.customerState }}</el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">联系人：{{ detail.contactName }}</el-col>
        <el-col :span="6">手机号：{{ detail.mobile }}</el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="12">地址：{{ detail.address }}</el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">店型（商圈）：{{ detail.storeTypeBusinessCircleText }}</el-col>
        <el-col :span="6">店型（面积）：{{ detail.storeTypeStoreAreaText }}</el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">店铺产权类型：{{ detail.storePropertyRightsType }}</el-col>
        <el-col :span="6">房租到期日期：{{ detail.leaseExpirationDate }}</el-col>
        <el-col :span="6">租约到期是否能续签：{{ detail.leaseExpirationCanRenewed }}</el-col>
        <el-col :span="6">租金：{{ detail.rent }}</el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">租金支付方式：{{ detail.rentPayMethod }}</el-col>
        <el-col :span="6">营业执照：{{ detail.businessLicense }}</el-col>
        <el-col :span="6">评分：{{ detail.score }}{{
          detail.score > 0 && detail.score >= detail.targetScore ? '（建议招商）' : detail.score > 0 && detail.score >= detail.targetScore ? '（不建议招商）' : ''
        }}</el-col>
        <el-col :span="6">达标评分：{{ detail.targetScore }}
          <text v-if="detail.score > 0 && detail.score >= detail.targetScore" class="score-ok">建议招商</text>
          <text v-if="detail.score > 0 && detail.score < detail.targetScore" class="score-not-ok">不建议招商</text>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">归属业务人员：{{ detail.attributeUserName }}</el-col>
        <el-col :span="6">添加时间：{{ detail.createTime }}</el-col>
        <el-col :span="6">创建人：{{ detail.createUserName }}</el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">
          相关照片：
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="24" class="picture-list">
          <div v-for="(item,index) in pictureList" :key="index" class="picture-item">
            <image-show :md5="item.downloadCode" style="width: 50px; height: 50px;" />
          </div>
        </el-col>
      </el-row>
      <el-row class="el-row">
        <el-col :span="6">
          评估记录：
        </el-col>
      </el-row>
      <el-table class="table-default" border style="margin-bottom: 30px" :data="evaluationRecordList">
        <el-table-column label="序号" width="49" type="index" align="center" />
        <el-table-column prop="evaluationName" label="评估表名称" align="center" />
        <el-table-column prop="createTime" label="评估时间" width="148" show-tooltip-when-overflow align="center" />
        <el-table-column prop="createUserName" label="评估人" width="100" show-tooltip-when-overflow align="center" />
        <el-table-column label="操作" width="60" fixed="right" align="center">
          <template v-slot="scope">
            <div class="list-operate-menu">
              <el-tooltip class="item" effect="dark" content="明细" placement="top">
                <i class="el-icon-document" @click="goEvaluationRecordDetail(scope.row)" />
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import filters from '@/filters/index'
import { mapGetters } from 'vuex'
import messageMixin from '@/mixins/index'
import ImageShow from '@/components/imageShow/index.vue'

export default {
  components: { ImageShow },
  filters: { ...filters },
  mixins: [messageMixin],
  data() {
    return {
      detail: {},
      storePropertyRightsTypeArray: ['', '自有物业', '租赁', '其他'],
      leaseExpirationCanRenewedArray: ['', '能', '不能'],
      rentPayMethodArray: ['', '押三付一', '押一付一'],
      customerStateArray: ['潜在客户', '意向客户', '待签约客户', '成交客户'],
      evaluationRecordList: [],
      pictureList: [],
      storeTypeBusinessCircleTitleList: [],
      storeTypeStoreAreaTitleList: []
    }
  },
  computed: {
    ...mapGetters([
      'userInfo',
      'payMethodList'
    ])
  },
  created() {
    const query = this.$route.query
    if (query.params) {
      const params = JSON.parse(decodeURIComponent(this.$Base64.decode(query.params)))
      this.detail = { ...this.detail, ...params }
      this.getStoreTypeOptionList()
    }
  },
  methods: {
    getStoreTypeOptionList: async function() {
      let loading = ''
      try {
        loading = this.$loading({
          lock: true,
          text: '请稍等...'
        })
        const res = await this.$api.getCommonFieldList({
          commonFieldCategoryIdList: [3, 4],
          pageSize: 100
        })
        const storeTypeBusinessCircleTitleList = ['']
        const storeTypeStoreAreaTitleList = ['']
        for (let i = 0; i < res.list.length; i++) {
          if (res.list[i].commonFieldCategoryId === 3) {
            storeTypeBusinessCircleTitleList.push(res.list[i].fieldName)
          } else {
            storeTypeStoreAreaTitleList.push(res.list[i].fieldName)
          }
        }
        this.storeTypeBusinessCircleTitleList = storeTypeBusinessCircleTitleList
        this.storeTypeStoreAreaTitleList = storeTypeStoreAreaTitleList
        this.getData()
      } catch (err) {
        console.error(err)
      } finally {
        loading && loading.close()
      }
    },
    getData: async function() {
      let loading = ''
      try {
        loading = this.$loading({
          lock: true,
          text: '请稍等...'
        })
        const res = await this.$api.getPotentialCustomerStoreDetail({
          potentialCustomerStoreId: this.detail.potentialCustomerStoreId
        })
        res.storePropertyRightsType = this.storePropertyRightsTypeArray[res.storePropertyRightsType]
        res.leaseExpirationCanRenewed = this.leaseExpirationCanRenewedArray[res.leaseExpirationCanRenewed]
        res.rentPayMethod = this.rentPayMethodArray[res.rentPayMethod]
        res.customerState = this.customerStateArray[res.customerState]
        res.leaseExpirationDate = res.leaseExpirationDate > 0 ? this.$commonUtils.getShowDateByDate(this.$commonUtils.getDateByMinIntTimestamp(res.leaseExpirationDate)) : ''
        res.createTime = this.$commonUtils.getShowTime(res.createTime)
        if (res.storeTypeBusinessCircleId > 0) {
          res.storeTypeBusinessCircleText = this.storeTypeBusinessCircleTitleList[res.storeTypeBusinessCircleId]
        }
        if (res.storeTypeStoreAreaId > 0) {
          res.storeTypeStoreAreaText = this.storeTypeStoreAreaTitleList[res.storeTypeStoreAreaId]
        }
        this.detail = res
        const res2 = await this.$api.getEvaluationRecordList({
          evaluationOrganizationType: 1,
          evaluationOrganizationId: this.detail.potentialCustomerStoreId,
          pageSize: 100
        })
        for (let i = 0; i < res2.list.length; i++) {
          res2.list[i].evaluationName = '店铺招商评估表'
          res2.list[i].createTime = this.$commonUtils.getShowTime(res2.list[i].createTime)
        }
        this.evaluationRecordList = res2.list
        const res3 = await this.$api.getOtherPictureList({
          pictureType: 1,
          attributeObjectType: 1,
          attributeObjectId: this.detail.potentialCustomerStoreId,
          pageSize: 100
        })
        // for (let i = 0; i < res2.list.length; i++) {
        //   res2.list[i].evaluationName = '店铺招商评估表';
        //   res2.list[i].createTime = this.$commonUtils.getShowTime(res2.list[i].createTime);
        // }
        this.pictureList = res3.list
      } catch (err) {
        console.error(err)
      } finally {
        loading && loading.close()
      }
    },
    goEvaluationRecordDetail(item) {
      this.$addTab('marketEvaluationRecordDetail', {
        evaluationRecordId: item.evaluationRecordId
      }, '评估记录详情 - ' + this.detail.storeName)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 10px;
  color: #666666;
}

.picture-list {
  display: flex;
}

.picture-item {
  display: flex;
  border: 1px #fafafa solid;
  margin: 5px;
}

.score-ok {
  color: #00aa00;
}

.score-not-ok {
  color: #aa0000;
}

</style>
